<template>
  <view>
    <view class="header_fixed" :style="{ background: bg, color: color }">
      <view class="headerPlace" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="header_h flex-ac-jc" :style="{ height: navigationBarHeight + 'px' }">
        <view class="head_left" @tap="goBack" :style="{ width: customWidth + 'px' }">
          <u-icon name="arrow-left" size="38rpx" bold v-if="pages > 1"></u-icon>
        </view>
        <text class="head_title flex-ac f32 gui-bold qoverDot flex1 center">{{ title }}</text>
        <text class="head_right" :style="{ width: customWidth + 'px' }"></text>
      </view>
      <view class="headerPlace2"></view>
    </view>
    <view v-if="isShowPlace" :style="{ height: navHeight + 'px' }"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
  title: String,
  isShowPlace: {
    type: Boolean,
    default: true
  },
  bg: {
    type: String,
    default: '#ffffff'
  },
  color: {
    type: String,
    default: '#000000'
  }
});
const navHeight = ref(getApp().globalData.navHeight); //总体高度
const statusBarHeight = ref(getApp().globalData.statusBarHeight); //胶囊高度
const navigationBarHeight = ref(getApp().globalData.navigationBarHeight); //导航栏高度
const customWidth = ref(getApp().globalData.customWidth); //胶囊宽度
const pages = ref(getCurrentPages().length);
// console.log(navHeight.value, statusBarHeight.value, navigationBarHeight.value, customWidth.value, pages.value);
onMounted(() => {
  setStateBarText();
});

const setStateBarText = () => {
  if (props.color == '#ffffff') {
    uni.setNavigationBarColor({
      frontColor: '#ffffff', // 导航栏文字设置
      backgroundColor: '' // 导航栏背景色设置,可以不传，但是必须要有，真2
    });
  }
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.header_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.headerPlace2 {
  height: 20rpx;
}

.header_h {
  padding: 0 20rpx;
  .head_title {
    margin: 0 20rpx;
  }
}
</style>
